<template>
  <view class="flex-1">
    <!-- #ifdef MP-WEIXIN -->
    <customNav
      style="position: relative; z-index: 66"
      title="在售飞机详情"
    ></customNav>
    <!-- #endif -->
    <view>
      <view class="">
        <up-swiper
          radius="0"
          :list="airInfo.detail_images"
          height="310"
          indicator
          imgMode="aspectFit"
          @change="(e) => (current = e.current)"
        >
          <template #indicator>
            <view class="indicator">
              <view
                class="indicator__dot"
                v-for="(item, index) in airInfo.detail_images"
                :key="index"
                :class="[index === current && 'indicator__dot--active']"
              >
              </view>
            </view>
          </template>
        </up-swiper>
      </view>
      <view class="px-5 -mt-[146rpx] z-auto relative">
        <view class="bg-white pt-[28rpx] px-4 pb-[30rpx] rounded-xl">
          <view class="text-black text-[40rpx] font-semibold">{{
            airInfo.name
          }}</view>
          <image
            class="w-full h-[184rpx] mt-[30rpx]"
            :src="airInfo.detail_image"
          ></image>
          <view class="flex justify-between items-center px-[22rpx] mt-[30rpx]">
            <view class="flex flex-col justify-center items-center">
              <view class="text-[#9597A3] text-xs">出厂日期</view>
              <view class="text-base font-medium text-[#1A1C1E] mt-3">{{
                airInfo.produce_atime || "-"
              }}</view>
            </view>
            <view class="flex flex-col justify-center items-center">
              <view class="text-[#9597A3] text-xs">飞行小时数</view>
              <view class="text-base font-medium text-[#1A1C1E] mt-3"
                >{{ airInfo.fly_atime || "-" }}
                <text class="text-[20rpx]"> 小时</text>
              </view>
            </view>
            <view class="flex flex-col justify-center items-center">
              <view class="text-[#9597A3] text-xs">价格</view>
              <view class="text-base font-medium text-[#1A1C1E] mt-3"
                >{{ airInfo.price || "-" }}
              </view>
            </view>
          </view>
          <view
            class="bg-[#F5F7FA] rounded-[10rpx] w-full flex justify-between p-3 mt-5"
          >
            <view class="w-1/4 text-center">
              <image src="@/static/icon-1.png" class="w-6 h-6"></image>
              <view class="text-black text-xs">包修协议</view>
            </view>
            <view class="w-1/4 text-center">
              <image src="@/static/icon-2.png" class="w-6 h-6"></image>
              <view class="text-black text-xs">配置高</view>
            </view>
            <view class="w-1/4 text-center">
              <image src="@/static/icon-3.png" class="w-6 h-6"></image>
              <view class="text-black text-xs">高速上网</view>
            </view>
            <view class="w-1/4 text-center">
              <image src="@/static/icon-4.png" class="w-6 h-6"></image>
              <view class="text-black text-xs"
                >{{ airInfo.sit_total }}座客舱</view
              >
            </view>
          </view>
        </view>
        <view class="bg-white rounded-xl p-[30rpx] mt-3">
          <view class="text-black text-xl font-medium mb-[22rpx]"
            >通用客舱布局</view
          >
          <swiper
            class="w-full h-[210rpx]"
            circular
            :indicator-dots="false"
            :autoplay="true"
          >
            <swiper-item
              v-for="(item, index) in airInfo.cabin_image"
              :key="index"
            >
              <image
                @click="showImg(index)"
                class="w-full h-[210rpx] rounded-lg"
                :src="item"
                mode="aspectFill"
              ></image>
            </swiper-item>
          </swiper>
        </view>
        <view class="bg-white rounded-xl py-[30rpx] mt-3 mb-32">
          <view class="text-black text-xl font-medium mb-5 pl-5">产品详情</view>
          <view class="pb-5">
            <view class="flex items-center">
              <image
                src="@/static/icon-5.png"
                class="w-[6rpx] h-[36rpx]"
              ></image>
              <view class="text-main text-xl font-medium pl-[30rpx]">规格</view>
            </view>
            <view class="flex items-center px-5 mt-[30rpx]">
              <template v-for="(item, index) in airInfo.special" :key="index">
                <view
                  class="flex flex-col justify-center w-1/3"
                  v-if="item.state == 1"
                >
                  <view class="text-[#9597A3] text-xs">{{ item.title }}</view>
                  <view class="text-base text-[#1A1C1E] mt-2">{{
                    item.intro
                  }}</view>
                </view>
              </template>
            </view>
            <view class="mx-5 aaaa mt-[34rpx]"></view>
          </view>
          <view class="pb-5">
            <view class="flex items-center">
              <image
                src="@/static/icon-5.png"
                class="w-[6rpx] h-[36rpx]"
              ></image>
              <view class="text-main text-xl font-medium pl-[30rpx]">运载</view>
            </view>
            <view class="flex items-center px-5 mt-[30rpx]">
              <template v-for="(item, index) in airInfo.delivery" :key="index">
                <view
                  v-if="item.state == 1"
                  class="flex flex-col justify-center text-left mr-[134rpx]"
                >
                  <view class="text-[#9597A3] text-xs">{{ item.title }}</view>
                  <view class="text-base text-[#1A1C1E] mt-2">{{
                    item.intro
                  }}</view>
                </view>
              </template>
            </view>
            <view class="mx-5 aaaa mt-[34rpx]"></view>
          </view>
          <view class="pb-5">
            <view class="flex items-center">
              <image
                src="@/static/icon-5.png"
                class="w-[6rpx] h-[36rpx]"
              ></image>
              <view class="text-main text-xl font-medium pl-[30rpx]"
                >发动机</view
              >
            </view>
            <view class="flex flex-col px-5 mt-[6rpx]">
              <template v-for="(item, index) in airInfo.motor" :key="index">
                <view
                  class="flex flex-col justify-center mt-3"
                  v-if="item.state == 1"
                >
                  <view class="text-[#9597A3] text-xs">{{ item.title }}</view>
                  <view class="text-base text-[#1A1C1E] mt-2">{{
                    item.intro
                  }}</view>
                </view>
              </template>
            </view>
            <view class="mx-5 aaaa mt-[34rpx]"></view>
          </view>
          <view class="">
            <view class="flex items-center">
              <image
                src="@/static/icon-5.png"
                class="w-[6rpx] h-[36rpx]"
              ></image>
              <view class="text-main text-xl font-medium pl-[30rpx]">航行</view>
            </view>
            <view class="flex items-center px-5 mt-[30rpx]">
              <template v-for="(item, index) in airInfo.sail" :key="index">
                <view
                  class="flex flex-col justify-center w-1/3"
                  v-if="item.state == 1"
                >
                  <view class="text-[#9597A3] text-xs">{{ item.title }}</view>
                  <view class="text-base text-[#1A1C1E] mt-2">{{
                    item.intro
                  }}</view>
                </view>
              </template>
            </view>
          </view>
        </view>
      </view>
      <view class="fixed w-full bottom-0 bg-white px-5 pt-[30rpx] pb-5">
        <view
          @click="go"
          class="bg-theme rounded w-full font-medium text-lg text-white h-[90rpx] leading-[90rpx] text-center"
        >
          我要询价
        </view>
        <view class="text-[#A2A4AE] text-xs text-center mt-2"
          >我们的工作人员将在2小时内与你联系</view
        >
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { getPlaneDetail_api } from "@/api/index";
import { ref, reactive, computed } from "vue";
import { onPageScroll, onLoad, onShareAppMessage } from "@dcloudio/uni-app";
import { useUserStore } from "@/stores/user.js";
const userStore = useUserStore();
const settingInfo = computed(() => userStore.setting);

onPageScroll((e) => {});
const current = ref(0);
const list1 = reactive([
  "https://cdn.uviewui.com/uview/swiper/swiper1.png",
  "https://cdn.uviewui.com/uview/swiper/swiper2.png",
  "https://cdn.uviewui.com/uview/swiper/swiper3.png",
]);

const go = () => {
  uni.navigateTo({
    url: `/pages/index/consultingPrices?id=${airInfo.value.id}&name=${airInfo.value.name}`,
  });
};
const airInfo = ref({});
const getDetail = (id) => {
  getPlaneDetail_api(id).then((res) => {
    airInfo.value = res;
    getWidth(res.cabin_image);
  });
};

onLoad(({ id }) => {
  getDetail(id);
});

onShareAppMessage(() => {
  return {
    title: "私人飞机买卖、包机、咨询，专业团队为您提供全流程服务",
    path: `/pages/index/saleAirInfo?id=${airInfo.value.id}`,
    imageUrl: settingInfo.value.shareImg,
  };
});

const trs = ref(true);
const getWidth = (src) => {
  uni.getImageInfo({
    src,
    success: function (image) {
      trs.value = image.width > 1000;
    },
  });
};

const showImg = (index) => {
  uni.previewImage({
    urls: airInfo.value.cabin_image,
    current: index,
    longPressActions: {
      itemList: ["保存图片"],
      success: function (data) {},
      fail: function (err) {
        console.log(err.errMsg);
      },
    },
  });
};
</script>

<style lang="scss" scoped>
.aaaa {
  border: 2rpx solid #f7f7f7;
}
:deep(.u-swiper__indicator) {
  bottom: 176rpx !important;
}
.indicator {
  @include flex(row);
  justify-content: center;

  &__dot {
    height: 8rpx;
    width: 8rpx;
    border-radius: 100px;
    background-color: rgba(255, 255, 255, 0.35);
    margin: 0 5px;
    transition: background-color 0.3s;

    &--active {
      width: 28rpx;
      background-color: #ffffff;
    }
  }
}

.indicator-num {
  padding: 2px 0;
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 100px;
  width: 35px;
  @include flex;
  justify-content: center;

  &__text {
    color: #ffffff;
    font-size: 12px;
  }
}

.img-cus {
  position: relative;
  width: 100vw;
  height: 210rpx;
  background-size: contain; /* 确保图片根据视口大小进行缩放 */
  animation: scroll 60s ease-in-out infinite;
}

@keyframes scroll {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: -100vw 0; /* 向左移动整个视口宽度 */
  }
  100% {
    background-position: 0 0; /* 移动回到初始位置 */
  }
}
</style>
